//用户管理
import { Button, Form, Input, Table, Pagination, Space, Modal, Switch, Row, Col, Radio, Select } from 'antd';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { useEffect, useState, FC, ReactNode } from 'react';
import type { ColumnsType } from 'antd/lib/table';
import '../index.css'
import http from '../../../../utils/axios';
import { host2 } from '../../../../utils/api'
// depId: 1
// materialId: null
// materialStyleId: null
// operatorId: 1
// roleId: 1
// roleName: "系统管理员"
// signingTrialRoleId: null
// userAccountNumber: 1
// userAods: 1
// userAutomaticDispatch: 0
// userId: 1
// userInspectorCode: null
// userIp: null
// userLeaveEnd: null
// userLeaveStart: null
// userMailbox: null
// userName: "张小龙"
// userPassword: "42f358141cb1cf52698321c4757cb1df"
// userPhone: "13568774897"
// userState: 0
// userUpdateLastTime: "2022-06-30 17:32:12"
interface DataType {
  key: string;//序号
  startType: string;//启动状态
  userkey: string;//用户账号
  userName: string;//用户名称
  department: string;//所属部门
  automaticBillOrder: string;//自动派单顺序
  signRole: string;//签申角色
  userRoles: string;//用户角色
  inspectorNumber: string;//检验员代号
  automaticType: string;//参与自动派单
  inspectionGroup: string;//检验物料组
  someIp: string;//IP
  Mailboxes: string;//邮箱
  SabbaticalStart: string;//请假开始
  SabbaticalEnd: string;//请假结束
  Operator: string;//操作人
  startTime: string;//维护时间
  //需要一个字段是密码

}
const UserControl: FC = () => {
  const { Option } = Select;
  const { TextArea } = Input
  const getData = () => {
    http({
      url: host2 + '/shiro/user/select',
      method: 'get',
      data: {}
    }).then((res) => {
      console.log(res);

    }).catch()
  };
  useEffect(() => { getData() }, [])
  const [isModalVisible, setIsModalVisible] = useState(false);
  //新增的弹框状态
  const addshowModal = () => {
    setIsModalVisible(true)

  };
  const editshowModal = () => {
    setEditisModalVisible(true)
  }
  const ss = () => {
    console.log(22);
  }
  const selectname = () => { }
  const resetit = () => { }
  //新增的弹框控制写在行内
  //删除
  const delItem = () => {
    console.log('删除');
  }
  //编辑的弹框控制
  const [editisModalVisible, setEditisModalVisible] = useState(false);
  const edithandleOk = () => {
    setEditisModalVisible(false);
  };
  const edithandleCancel = () => {
    setEditisModalVisible(false);
  };
  //创建编辑弹框的表单实例
  const [editform] = Form.useForm();
  const [form] = Form.useForm();
  //table渲染需要的数据和其他
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'key',
      fixed: 'left',
      align: 'center',
      width: '4.375rem'
    },
    {
      title: '操作',
      // className: 'column-money',
      // dataIndex: 'nameNumber',
      render: (_, record) => (
        <Space size="middle">
          <span onClick={() => {
            editshowModal();
            editform.setFieldsValue(record)

          }}>编辑</span>
          <span onClick={delItem}>删除</span>
        </Space>
      ),
      align: 'center',
    },
    {
      title: '启动状态',
      // dataIndex: 'startType',
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
      )
      // <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />

    },
    {
      title: '用户账号',
      dataIndex: 'userkey',

    },
    {
      title: '用户名称',
      dataIndex: 'userName',

    },
    {
      title: '所属部门',
      dataIndex: 'department',

    },
    {
      title: '自动派单顺序',
      dataIndex: 'automaticBillOrder',

    },
    {
      title: '签申角色',
      dataIndex: 'signRole',

    },
    {
      title: '用户角色',
      dataIndex: 'userRoles',

    },
    {
      title: '检验员代号',
      dataIndex: 'inspectorNumber',

    },
    {
      title: '参与自动派单',
      dataIndex: 'automaticType',

    },
    {
      title: '检验物料组',
      dataIndex: 'inspectionGroup',

    },
    {
      title: 'IP',
      dataIndex: 'someIp',

    },
    {
      title: '邮箱',
      dataIndex: 'Mailboxes',

    },
    {
      title: '请假开始',
      dataIndex: 'SabbaticalStart',

    },
    {
      title: '请假结束',
      dataIndex: 'SabbaticalEnd',

    },
    {
      title: '操作人',
      dataIndex: 'Operator',

    },
    {
      title: '维护时间',
      dataIndex: 'startTime',

    },


    // {
    //   title: '操作',
    //   dataIndex: 'address',
    //   render: (_, record) => (
    //     <Space size="mkeydle">
    //       <span onClick={ss}>编辑</span>
    //       <span>角色权限</span>
    //       <span>删除</span>
    //     </Space>
    //   )
    // },
  ];
  const data: DataType[] = [
    {
      key: '1',
      startType: '启动状态',
      userkey: '10001',
      userName: '张无忌',
      department: '所属部门',
      automaticBillOrder: '1',
      signRole: '签审角色',
      userRoles: 'IQC检验员',
      inspectorNumber: 'QC001',
      automaticType: '否',
      inspectionGroup: '检验物料组',
      someIp: 'IP',
      Mailboxes: '邮箱',
      SabbaticalStart: '请假开始',
      SabbaticalEnd: '请假结束',
      Operator: '枫叶',
      startTime: '2021/6/1 12:12:12'
    },
    {
      key: '2',
      startType: '启动状态',
      userkey: '10001',
      userName: '张无忌',
      department: '所属部门',
      automaticBillOrder: '1',
      signRole: '签审角色',
      userRoles: 'IQC检验员',
      inspectorNumber: 'QC001',
      automaticType: '否',
      inspectionGroup: '检验物料组',
      someIp: 'IP',
      Mailboxes: '邮箱',
      SabbaticalStart: '请假开始',
      SabbaticalEnd: '请假结束',
      Operator: '枫叶',
      startTime: '2021/6/1 12:12:12'
    },
    {
      key: '3',
      startType: '启动状态',
      userkey: '10001',
      userName: '张无忌',
      department: '所属部门',
      automaticBillOrder: '1',
      signRole: '签审角色',
      userRoles: 'IQC检验员',
      inspectorNumber: 'QC001',
      automaticType: '否',
      inspectionGroup: '检验物料组',
      someIp: 'IP',
      Mailboxes: '邮箱',
      SabbaticalStart: '请假开始',
      SabbaticalEnd: '请假结束',
      Operator: '枫叶',
      startTime: '2021/6/1 12:12:12'
    },
  ];
  return (<div>
    {/* 搜索，查询框 */}
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >角色名称:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={selectname}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={resetit}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.25rem' }} type="primary" onClick={addshowModal}>+新增</Button></div>

    {/* table表格 */}
    <Table
      columns={columns}
      dataSource={data}
      bordered
      pagination={false}
      scroll={{ x: 2300 }}
    />
    {/* 分页 */}
    <Pagination total={85} showSizeChanger showQuickJumper />
    {/* showTotal={total => `总共 ${total}页`} */}

    {/* 新增的弹框 */}
    <Modal title="新增"
      visible={isModalVisible}
      onOk={() => { setIsModalVisible(false); }}
      onCancel={() => { setIsModalVisible(false); }}
      width='40rem'>
      <Form
        labelCol={{ span: 11 }}
        wrapperCol={{ span: 13 }}
      >
        <Row>
          <Col >
            <Form.Item label="用户账号：">
              <Input />
            </Form.Item>
          </Col>
          <Col >
            <Form.Item label="姓名：">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label=" 所属部门:">
              <Select
                defaultValue="one"

              >
                <Option value="one">部门1</Option>
                <Option value="two">部门2</Option>
                <Option value="gos">部门3</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10'></Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label=" 用户角色:">
              <Select
                defaultValue="a"
              >
                <Option value="a">老六</Option>
                <Option value="b">法外狂徒</Option>
                <Option value="c">弟弟</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label=" 签审角色：">
              <Select
                defaultValue="ones"
              >
                <Option value="ones">boss1</Option>
                <Option value="twos">boss2</Option>
                <Option value="goss">Bigboss</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label="检验员代号:">
              <Input style={{ width: '150px' }} />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label=" 检验类别:">
              <Select
                defaultValue="ones"
              >
                <Option value="on">常规检验</Option>
                <Option value="tw">常规免检</Option>
                <Option value="go">化工检验</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row >
          <Col span='10'>
            <Form.Item label="自动派单顺序:">
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="IP地址:">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label="邮箱:">
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="密码:">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label="参与自动派单：">
              <Radio.Group name="radiogroup" defaultValue={1} >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span='10' >
            <Form.Item label=" 检验物料组:">
              <Select
                defaultValue="ones"
                disabled
              >
                <Option value="on">常规检验</Option>
                <Option value="tw">常规免检</Option>
                <Option value="go">化工检验</Option>
              </Select>
            </Form.Item></Col>
        </Row>
        <Row>
          <Col span='10'>
            <Form.Item label='在岗状态' >
              <Select defaultValue='on1' >
                <Option value="on1">在</Option>
                <Option value="tw2">不在</Option>
              </Select>
            </Form.Item></Col>
          <Col span='10'></Col>
        </Row>
        <Row>
          <Col span='10'></Col>
          <Col span='10'></Col>
        </Row>
      </Form>
    </Modal>

    {/* 编辑的弹框 */}
    <Modal title="编辑信息"
      visible={editisModalVisible}
      onOk={edithandleOk}
      onCancel={edithandleCancel}
      width='40rem'>
      <Form
        labelCol={{ span: 11 }}
        wrapperCol={{ span: 13 }}
        form={editform}
      >
        <Row>
          <Col >
            <Form.Item label="用户账号：" name='userkey'>
              <Input />
            </Form.Item>
          </Col>
          <Col >
            <Form.Item label="用户名称:" name='userName'>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label=" 所属部门:">
              <Select
                defaultValue="one"

              >
                <Option value="one">部门1</Option>
                <Option value="two">部门2</Option>
                <Option value="gos">部门3</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10'></Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label=" 用户角色:">
              <Select
                defaultValue="a"
              >
                <Option value="a">老六</Option>
                <Option value="b">法外狂徒</Option>
                <Option value="c">弟弟</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label=" 签审角色：">
              <Select
                defaultValue="ones"
              >
                <Option value="ones">boss1</Option>
                <Option value="twos">boss2</Option>
                <Option value="goss">Bigboss</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label="检验员代号:" name='inspectorNumber'>
              <Input style={{ width: '150px' }} />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label=" 检验类别:">
              <Select
                defaultValue="ones"
              >
                <Option value="on">常规检验</Option>
                <Option value="tw">常规免检</Option>
                <Option value="go">化工检验</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row >
          <Col span='10'>
            <Form.Item label="自动派单顺序:" name='automaticBillOrder'>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="IP地址:" name='someIp'>
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label="邮箱:" name='Mailboxes'>
              <Input />
            </Form.Item>
          </Col>
          <Col span='10'>
            <Form.Item label="密码:">
              <Input />
            </Form.Item>
          </Col>
        </Row>
        <Row >
          <Col span='10'>
            <Form.Item label="参与自动派单：">
              <Radio.Group name="radiogroup" defaultValue={1} >
                <Radio value={1}>是</Radio>
                <Radio value={2}>否</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span='10' >
            <Form.Item label=" 检验物料组:">
              <Select
                defaultValue="ones"
                disabled
              >
                <Option value="on">常规检验</Option>
                <Option value="tw">常规免检</Option>
                <Option value="go">化工检验</Option>
              </Select>
            </Form.Item></Col>
        </Row>
        <Row>
          <Col span='10'>
            <Form.Item label='在岗状态' >
              <Select defaultValue='on1' >
                <Option value="on1">在</Option>
                <Option value="tw2">不在</Option>
              </Select>
            </Form.Item></Col>
          <Col span='10'></Col>
        </Row>
        <Row>
          <Col span='10'></Col>
          <Col span='10'></Col>
        </Row>
      </Form>
    </Modal>
  </div>)
}

export default UserControl